<template>
  <div class="commentitemitem">
    <div class="commentitemitem-content">
      <ul class="commentitemitem-content-list">
        <li class="commentitemitem-content-list-li">
          <div class="commentitemitem-content-list-li-img">
            <img v-lazy="Info.icon" />
          </div>
          <div class="commentitemitem-content-list-li-txt">
            <span>
              <h2>{{Info.name}}</h2>
              <em>TIME:{{Info.time|timeDate}}</em>
            </span>
            <p>{{Info.content}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    Info: Object
  }
};
</script>

<style lang='scss'>
.commentitemitem {
  .commentitemitem-content-list {
    display: flex;
    .commentitemitem-content-list-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .commentitemitem-content-list-li-img {
        img {
          width: 115px;
          height: 115px;
          border-radius: 50%;
        }
      }
      .commentitemitem-content-list-li-txt {
        width: 374px;
        cursor: pointer;
        height: 128px;
        padding-right: 22px;
        background: url(/img/cus-bg.png) no-repeat;
        margin-left: 5px;
        &:hover {
          background: url(/img/cus-bg-hover.png) no-repeat;
        }
        padding-left: 44px;
        span {
          width: 100%;
          display: flex;
          padding-top: 20px;
          overflow: hidden;
          justify-content: space-between;
        }
        p {
          display: block;
          font-size: 12px;
          padding-top: 5px;
          line-height: 20px;
          color: #646464;
        }
      }
    }
  }
}
</style>